<template>
    <div class="search" :class="isFixed?'search-fix':''">
        <div class="search-fixed-top" id="fixedBox">
            <div class="search-panel">
                <font-awesome-icon :icon="['fa', 'search']" style="color: rgb(159,159,159);flex:1;" />
                <input v-model="kw" type="search" placeholder="请输入要搜索的商品" style="flex: 6; outline: none;border: none;color: #9F9F9F;font-size: 4vw">
                <div class="search-button" @click="searchBusinesses(kw)" style="flex: 1.5;">搜索</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, toRaw, toRefs, watch} from "vue";
const emit = defineEmits(["search"])
const kw = ref("")
const props = defineProps({
    isFixed:{
        type:Boolean
    }
})
const {isFixed} = toRefs(props)

const searchBusinesses = (kw)=>{
    emit('search',toRaw(kw))
}
</script>

<style scoped>
.search-fix{
    position: fixed;
    background-color: white;
    top: 0
}
.search{
    width: 100%;
    height: 13vw;
}
.search .search-fixed-top{
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
    text-align: center;
}
.search .search-fixed-top .search-panel{
    width: 95%;
    display: flex;
    height: 8vw;
    justify-content: center;
    align-items: center;
    border: 2px solid #17BAF9;
    border-radius:25px ;
    font-size: 5vw;
    color: #9F9F9F;
}
.search .search-fixed-top .search-panel .search-button{
    height: 8vw;
    font-size: 5vw;
    border-radius: 25px;
    background-color: #17BAF9;
    color: white;
}
</style>